<template>
  <cover-view class="model"
              :class="show_statistics_model ? 'show_statistics_model' : ''">
    <cover-view class="model-head-title">
      <cover-image src="../../static/images/xhua.png"
                   class="xiaohua"></cover-image>
      分数统计
      <cover-image src="../../static/images/xhua.png"
                   class="xiaohua"></cover-image>
    </cover-view>
    <cover-view class="model-cont">
      <cover-view class="show_answer">正确答案：{{problemData.problem}}</cover-view>
      <cover-view class="user-score-box"
                  v-for="(item,key) in members"
                  :key="key">
        <cover-image class="statistics-user-img"
                     :src="item.avatarUrl"></cover-image>
        <cover-view class="score-box">
          <cover-view class="statistics-score">{{item.score}}</cover-view>
          <cover-view class="add_score">(+{{item.wait_add_score}})</cover-view>
        </cover-view>
      </cover-view>
    </cover-view>
    <cover-view class="close-statistics"
                @tap="close_model">关闭休息({{count_down}}S)</cover-view>
  </cover-view>
</template>
<script>
export default {
    props: {
        show_statistics_model: Boolean,
        problemData: Object,
        members: Object,
        count_down: [Number, String]
    },
    methods: {
        close_model() {
            this.$emit('close_model')
        }
    }
}
</script>
<style scoped>
/* 统计分弹窗 */
.model.show_statistics_model {
  display: block;
}
.model-cont:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: ' ';
  clear: both;
  height: 0;
}
.user-score-box {
  float: left;
  width: 65px;
  height: 85px;
  text-align: center;
  margin: 10px;
  font-size: 14px;
}
.statistics-user-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.score-box {
  text-align: center;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.statistics-score {
  font-size: 14px;
  line-height: 25px;
}
.add_score {
  color: red;
  font-size: 14px;
}
.close-statistics {
  width: 140px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 0 15px;
  border-radius: 3px;
  color: #fff;
  background: #1aad19;
}
/* 统计分数弹窗end */
</style>
<style scoped>
 /* 公共代码，由于使用import报错，所以暂时这样 */
.model {
  display: none;
  position: fixed;
  top: 50px;
  bottom: 50px;
  left: 10px;
  right: 10px;
  z-index: 21;
  background: #f0f8ff;
  border-radius: 5px;
  box-shadow: 0 2px 4px 0 rgba(194, 194, 194, 0.5);
}
.xiaohua {
  display: inline-block;
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.model-cont {
  position: absolute;
  top: 50px;
  bottom: 50px;
  left: 0;
  right: 0;
  padding: 0 20px;
  overflow-y: auto;
}
.model-head-title {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 25px;
  text-align: center;
}
</style>
